<template>
  <view v-if="isShow">
    <!-- 微信小程序端、H5端、APP端 -->
    <!-- #ifdef MP-WEIXIN || H5 || APP-PLUS -->
    <button class="btn-normal" :open-type="setting.provider == 'mpwxkf' ? 'contact' : ''" :show-message-card="showCard"
      :send-message-path="cardPath" :send-message-title="cardTitle" :send-message-img="cardImage" @click="handleContact()">
      <slot></slot>
    </button>
    <!-- #endif -->
    <!-- #ifdef MP-ALIPAY -->
    <!-- 支付宝小程序端：智能客服 -->
    <view class="contact-box">
      <slot></slot>
      <contact-button v-if="setting.provider === 'myznkf'" :tnt-inst-id="setting.config.myznkf.tntInstId"
        :scene="setting.config.myznkf.scene" />
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
  import SettingKeyEnum from '@/common/enum/setting/Key'
  import SettingModel from '@/common/model/Setting'
  import MpAlipaySettingModel from '@/common/model/mp/alipay/Setting'

  export default {
    props: {
      // 是否显示消息卡片
      showCard: {
        Type: Boolean,
        default: false
      },
      // 消息卡片标题
      cardTitle: {
        Type: String,
        default: ''
      },
      // 消息卡片图片
      cardImage: {
        Type: String,
        default: ''
      },
      // 消息卡片点击跳转的路径
      cardPath: {
        Type: String,
        default: ''
      },
    },
    data() {
      return {
        isShow: false,
        setting: {}
      }
    },
    async created() {
      // 是否显示在线客服按钮
      this.isShow = await SettingModel.isShowCustomerBtn()
      // #ifndef MP-ALIPAY
      // 商城客服设置
      this.setting = await SettingModel.item(SettingKeyEnum.CUSTOMER.value, true)
      // #endif
      // #ifdef MP-ALIPAY
      // 商城客服设置
      this.setting = await MpAlipaySettingModel.item('customer', true)
      // #endif
    },
    methods: {

      // 在线客服 (企业微信客服)
      handleContact() {
        const app = this
        const { setting } = app
        // 企业微信客服
        if (setting.provider == 'wxqykf') {
          if (!setting.config.wxqykf.url || !setting.config.wxqykf.corpId) {
            this.$toast('客服链接和企业ID不能为空')
            return
          }
          // #ifdef H5
          window.open(setting.config.wxqykf.url)
          // #endif
          // #ifdef MP-WEIXIN
          wx.openCustomerServiceChat({
            extInfo: { url: setting.config.wxqykf.url },
            corpId: setting.config.wxqykf.corpId,
            showMessageCard: app.showCard,
            sendMessagePath: app.cardPath,
            sendMessageTitle: app.cardTitle,
            sendMessageImg: app.cardImage,
            success(res) {},
            fail(res) {
              console.log('wx.openCustomerServiceChat:fail', res)
            }
          })
          // #endif
          // #ifdef APP-PLUS
          uni.share({
            provider: 'weixin',
            scene: 'WXSceneSession',
            type: 0,
            openCustomerServiceChat: true,
            corpid: setting.config.wxqykf.corpId,
            customerUrl: setting.config.wxqykf.url,
            success(res) {
              console.log("success:" + JSON.stringify(res));
            },
            fail(e) {
              console.log('errCode', e.errCode, e)
              if (e.errCode === -8) {
                app.$toast('很抱歉，您的手机没有安装微信~')
              }
            }
          })
          // #endif
        }
      }

    }
  }
</script>

<!-- 支付宝小程序智能客服样式 -->
<!-- #ifdef MP-ALIPAY -->
<style lang="scss">
  .contact-box {
    position: relative;
  }

  .contact-box contact-button {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 88;
  }
</style>
<!-- #endif -->

<style lang="scss" scoped>

</style>